<template>
    <div class="w-8/12 bg-pum mx-auto mt-20 shadow-lg rounded-md p-6">
        <div v-for="(todo, index) in todos" :key="index" class="mb-5 flex">
            <div class="flex-1 flex">
                <input class="input flex flex-1" v-model="todo.title" />
            </div>
            <div class="flex">
                <button class="btn del" @click="delTodo(todo)">删除</button>
                <button class="btn edit" @click="editTodo(todo)">
                    编辑
                </button>
            </div>
        </div>
        <!-- 添加组件 -->
        <el-dialog title="添加任务" v-model="dialogVisible" width="60%">
            <input type="text" v-model="form.title" class="input border-4 w-full" />
            <template #footer>
                <button class="btn add py-3" @click="onSubmit">保存提交</button>
            </template>
        </el-dialog>
        <button class="btn add py-3" @click="dialogVisible = true">添加任务</button>
        <div class="text-lg">共有 {{ totalTodos }} 个任务待处理</div>
    </div>
</template>

<script>
import { mapActions, mapState, mapMutations, mapGetters } from 'vuex'

const form = { title: '' }
export default {
    data() {
        return { dialogVisible: false, form: Object.assign({}, form) }
    },
    created() {
        this.load()
    },
    computed: {
        ...mapState('todo', ['todos']),
        ...mapGetters('todo', ['totalTodos'])
        // total() {
        //     return this.todos.length
        // }
    },
    methods: {
        ...mapActions('todo', ['load']),
        ...mapMutations('todo', ['del', 'add', 'edit']),
        delTodo(todo) {
            this.del(todo)
        },
        onSubmit() {
            this[this.form.id ? 'edit' : 'add']({ todo: this.form })
            this.dialogVisible = false
            this.form = Object.assign({}, form)
        },
        editTodo(todo) {
            this.form = Object.assign({}, todo)
            this.dialogVisible = true
        }
    }
}
</script>

<style lang="scss">
.input {
    @apply bg-gray-100 hover:bg-gray-700 hover:text-white duration-300 p-5 font-bold text-lg;
}
.btn {
    @apply font-bold hover:opacity-75 duration-200 text-white border-none outline-none bg-gray-700 flex justify-center items-center px-5 rounded-none text-lg;
    &.edit {
        @apply bg-yellow-700 text-gray-100;
    }
    &.del {
        @apply bg-gray-800 text-white;
    }
}
</style>
